<template>
    <div id="header">
        <!-- bar -->
        <div class="box">
            <img class="bar" src="../assets/logo/headerbar.png" alt="">
            <div id="pop" @click="$router.push('/daili')">
                <img src="../assets/logo/icon.png" alt="" class="icon">
                <div class="info">申请代理商</div>
            </div>
        </div>
        <div class="menu">
            <div class="content">
                <div class="logo">
                    <img src="../assets/logo/logo1.png" alt="">
                </div>
                <div class="navbar">
                    <div class="item"  v-for="(item, index) in navbar" :key="index" @click="handleSelect(item, index)">
                        <div class="nav" :class="{'active':isActive == index}" >
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                navbar: [
                    {
                        name: "首页",
                        route:"/"
                    },
                    // {
                    //     name: "产品中心",
                    //     route:"/center"
                    // },
                    // {
                    //     name: "新闻动态",
                    //     route:"/news"
                    // },
                    {
                        name: "全国招募",
                        route:"/zhaomu"
                    },
                    {
                        name: "关于我们",
                        route:"/aboutus"
                    },
                ],
                isActive: "0",
            }
        },
        methods: {
            handleSelect(item, index) {
                this.isActive = index
                this.$router.push(item.route)
                // console.log(this.isActive);
                
            }
        },
    }
</script>

<style  scoped>
.active {
    color: #162d79 !important;
}
.menu {
    width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
    
}
.menu .content .logo img {
    display: block;
}
.menu .content {
    width: 1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu .content .navbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 24px;
}
.menu .content .navbar .nav {
    margin: 0 30px;
    color: #676767;
    cursor: pointer;
}
.box {
    position: relative;
    left: 0;
    top: 0;
}
.box #pop {
    position: absolute;
    right: 500px;
    top: 0;
    display: flex;
    align-items: center;
    color: #fff;
    line-height: 50px;
    cursor: pointer;
}
.box #pop .info {
    margin-left: 20px;
}
#header {
    width: 100%;
    min-width: 1200px;

}

.el-menu {
    margin: 0;
    padding: 0;
}
#logoimg {
    height: 40px;
    line-height: 60px;
    
}
.box .bar {
    width: 100%;
    min-width: 1200px;
}
</style>